<template>
	<a-modal title="新增班组" :width="800" :visible="visible" :maskClosable="false" :confirmLoading="confirmLoading"
		@ok="handleSubmit" @cancel="handleCancel" :footer="disabled ? null : undefined">

		<a-spin :spinning="confirmLoading">
			<a-form :form="form">
				<a-form-item style="display: none;" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
					<a-input v-decorator="['classGroupId']" />
				</a-form-item>
				<a-form-item label="班组名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
					<a-input placeholder="请输入班组名称" :disabled="disabled"
						v-decorator="['name', { rules: [{ required: true, message: '请输入班组名称！' }] }]" />
				</a-form-item>

				<a-form-item label="班组编号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
					<a-input placeholder="请输入班组编号" :disabled="disabled"
						v-decorator="['code', { rules: [{ required: true, message: '请输入班组编号！' }] }]" />
				</a-form-item>

				<a-form-item label="说明" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
					<a-textarea placeholder="请输入说明" :disabled="disabled" v-decorator="['remark']" />
				</a-form-item>

				<a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
					<a-radio-group style="width: 100%;" name="radioGroup" :disabled="disabled"
						v-decorator="['status', { rules: [{ required: true, message: '请选择状态！' }] }]">
						<a-radio :value="0">正常</a-radio>
						<a-radio :value="1">禁用</a-radio>
					</a-radio-group>
				</a-form-item>
				<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
					<a-input-number style="width: 100%;" :disabled="disabled"
						v-decorator="['sort', { rules: [{ required: true, message: '请输入排序！' }] }]" :min="0" />
				</a-form-item>
			</a-form>
		</a-spin>
	</a-modal>
</template>

<script>
import { add, edit } from '@/api/modular/main/classGroup/classGroup'

export default {
	data() {
		return {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 5 }
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 15 }
			},
			visible: false,
			confirmLoading: false,
			form: this.$form.createForm(this),
			isAddOrEdit: false,
			disabled: false,
		}
	},
	methods: {
		add(record) {
			this.visible = true;
			this.isAddOrEdit = true;
			this.disabled = false;
			setTimeout(() => {
				this.form.setFieldsValue({
					status: 0,
					sort: 0
				});
			}, 200)
			this.form.resetFields();
		},
		edit(record) {
			this.visible = true;
			console.log(record);
			this.isAddOrEdit = false;
			this.disabled = false;
			setTimeout(() => {
				this.form.setFieldsValue({
					classGroupId: record.classGroupId,
					name: record.name,
					code: record.code,
					remark: record.remark,
					status: record.status,
					sort: record.sort,
				});
			}, 100)
			this.form.resetFields();
		},
		readonly(record) {
			this.edit(record);
			this.disabled = true;
		},
		handleSubmit() {
			const { form: { validateFields } } = this
			this.confirmLoading = true
			let that = this;
			validateFields((errors, values) => {
				if (!errors) {
					console.log("values", values);
					if (that.isAddOrEdit) {//新增
						add({
							...values
						}).then(res => {
							console.log(res);
							if (res.code == 200) {
								that.confirmLoading = false;
								that.visible = false;
								that.$message.success('添加成功');
								that.form.resetFields();
								that.$emit('ok');
							} else {
								that.$message.error(res.message);
								that.confirmLoading = false;
							}
						}).catch(res => {
							that.$message.error(res.message);
							that.confirmLoading = false;
						})
					} else {
						edit({
							...values
						}).then(res => {
							if (res.code == 200) {
								that.confirmLoading = false;
								that.visible = false;
								that.$message.success('修改成功');
								that.form.resetFields();
								that.$emit('ok');
							} else {
								that.$message.error(res.message);
								that.confirmLoading = false;
							}
						}).catch(res => {
							that.$message.error(res.message);
							that.confirmLoading = false;
						})
					}
				} else {
					this.confirmLoading = false
				}
			})
		},
		handleCancel() {
			this.form.resetFields();
			this.visible = false
		}
	}
}
</script>
